<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>运费查询</title>
    <link rel="stylesheet" type="text/css" href="../wuliu/css/index.css">
	<link rel="stylesheet" type="text/css" href="../wuliu/jquerynav/css/nav.css">
	<link href="../wuliu/layui/css/layui.css" rel="stylesheet">
	<script src="../wuliu/layui/layui.js"></script>
	<!--<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">-->
	<link rel="stylesheet" type="text/css" href="../wuliu/font-awesome-4.7.0/css/font-awesome.min.css">

	<style>
		input{
			/*border:1px solid #e5e5e5;*/
			border:1px solid #0a0a0a;
			border-radius:5px;
			padding:10px;
			margin: 5px 15px 5px -2px;
			text-align: center;
			font-family: serif;
		}
		.reshow {
			text-align: center;
			border: none;
			border-radius: 5px;
			color: #fff;
			cursor: pointer;
			font-size: 14px;
			/*width: 1000px;*/
			/*height: 32px;*/
			outline: none;
			background: #6ab9d8;
			padding: 24px;
			margin: auto;
			margin-top: 20px;
			font-family: serif;
			padding-bottom: 10px;
		}
		.reshow1 {
			display: none;
		}

		/*旋转进入代码*/
		.ff {
			width: 200px;
			height: 200px;
			margin: 200px auto;
			/* 给父级盒子加溢出隐藏，使得子盒子一开始不可见 */
			overflow: hidden;
			border: 2px solid purple;
		}

		.ff::before {
			content: "你好！";
			/* 伪类元素属于行内元素，没有宽高，故转换为块元素 */
			display: block;
			width: 200px;
			height: 200px;
			background-color: #f5f426;
			transition: all .4s;
			/* 先旋转180度 */
			transform: rotate(180deg);
			/* 旋转中心点为左下角 */
			transform-origin: left bottom;
		}

		.ff:hover::before {
			/* 一开始转了180度，鼠标放上去以后转0度就回到原来位置了 */
			transform: rotate(0deg);
		}

		td {
			padding: 0.75rem;
			vertical-align: top;
			border: 1px solid #dee2e6;
			text-align: center;
			width: 60px;
		}
		tr {
			display: table-row;
			vertical-align: inherit;
			border-color: inherit;
			text-align: center;
		}
		table {
			width: 100%;
			margin-bottom: 1rem;
			color: #212529;
		}

	</style>


</head>
<body >
<!--<div id="city" th:include="~{wuliu/wuliucity.html :: city}"></div>-->
<p>配件电商运费计算系统：<span id="env" style="font-weight: bold;"/></p>


<div class="dome-main" style="margin: auto;margin-top: 50px;/*margin-left: 10px;margin-right: 10px;*/text-align: center;padding: 10px;font-family: serif;
	width: fit-content;
    border: 0px solid #f50a0a;
}">
	<div style="border: 1px solid #e5e5e5;padding: 10px;border-radius: 10px;">
		<div style="font-weight: 700;display: contents;">
		实际发货重量(kg)：<input style="border: 2px solid #fc0505" id="asw" required="required">
		</div>
		物件长度(mm)：<input id="length" >
		物件宽度(mm)：<input id="wight" >
		物件高度(mm)：<input id="height" >



	</div>



	<div class="container" style="width: 100%;text-align: center;margin-top: 30px" >


		<!--<h3 style="margin-top: 40px;font-family: serif;">&#45;&#45;请选择原寄城市&#45;&#45;</h3>
        <div class="dome-main" style="margin: auto;margin-top: 10px;margin-left: 10px;margin-right: 10px;text-align: center;padding: 10px;font-family: serif;">
            <div class="city-picker-selector" id="city-picker-search" style="text-align: center;margin: auto;width: fit-content;"></div>
        </div>

        &lt;!&ndash;<div class="btn-cont">
            <button class="btn btn-setcity">默认城市</button>
            <button class="btn btn-bg-1 btn-obtain">获取城市</button>
            <button class="btn btn-bg-2 btn-prohibit">禁止状态</button>
            <button class="btn btn-bg-3 btn-current">可用状态</button>
        </div>&lt;!&ndash; end .btn-cont &ndash;&gt;&ndash;&gt;

            <h3 style="font-family: serif;">&#45;&#45;请选择目的城市&#45;&#45;</h3>
        <div class="dome-main"  style="margin: auto;margin-top: 10px;margin-left: 10px;margin-right: 10px;text-align: center;padding: 10px;font-family: serif;">
            <div class="city-picker-selector" id="city-picker-search1" style="text-align: center;margin: auto;width: fit-content;"></div>
        </div>-->


		<div class="layui-col-md5 " style="margin-top: 20px;margin-bottom: 20px">
			<h3 style="font-family: serif;">--请选择原寄城市--</h3>
			<div class="dome-main" style="margin: auto;margin-top: 10px;/*margin-left: 10px;margin-right: 10px;*/text-align: center;
		padding: 10px;font-family: serif;width: unset;border: 1px solid #e5e5e5;">
				<div class="city-picker-selector" id="city-picker-search" required="required" lay-verify="required" style="text-align: center;margin: auto;width: fit-content;"></div>
			</div>
		</div>


		<div class="layui-col-md5 layui-col-md-offset2" style="margin-top: 20px;margin-bottom: 20px">
			<h3 style="font-family: serif;">--请选择目的城市--</h3>
			<div class="dome-main"  style="margin: auto;margin-top: 10px;/*margin-left: 10px;margin-right: 10px;*/text-align: center;
		padding: 10px;font-family: serif;width: unset;border: 1px solid #e5e5e5;">
				<div class="city-picker-selector" id="city-picker-search1" required="required" lay-verify="required" style="text-align: center;margin: auto;width: fit-content;"></div>
			</div>
		</div>


		<div class="btn-cont">
			<!--<button class="btn btn-setcity1">默认城市</button>
            <button class="btn btn-bg-1 btn-obtain1">获取城市</button>
            <button class="btn btn-bg-2 btn-prohibit1">禁止状态</button>
            <button class="btn btn-bg-3 btn-current1">可用状态</button>-->
			<select class="selector-item " style="text-align: center;display: none" id="selectflag">
				<option value="1" selected>路线版本：默认</option>
				<option value="2">Two</option>
				<option value="3">Three</option>
			</select>
			<button class="btn btn-bg-4 btn-current2" style="border-radius: 35px;width: 200px;height: 45px;">查询</button>
		</div><!-- end .btn-cont -->



	</div>

	<div id="reshow" class="reshow1">
		<!--<p id="result1" style="text-align: center;margin-bottom: 10px"></p>-->
		<div id="result1" ></div>
		<div style="font-size: large;font-weight: 900;font-family: serif;">
			建议物流类型：<div id="result2" style="display: contents;color: #f90000;" ></div> &nbsp;&nbsp;&nbsp;
			预估最低运费：<div id="result3" style="display: contents;color: #f90000;" ></div>&nbsp;元
		</div>

	</div>
</div>









<div class="leftNav-item" style="font-family: serif;">
	<ul>
		<li>
			<i class="fa fa-bar-chart-o"></i>
			<a href="/wuliutable" class="rota">物流数据</a>
		</li>
		<li>
			<i class="fa fa-list" id="test1"></i>
			<a href="/jianyuetable" class="rota">简约报表</a>

		</li>
		<li title="轻抛系数">
			<i class="fa fa-line-chart"></i>
			<a href="/xishutable"class="rota">轻抛系数</a>
		</li>
		<li title="规则设定">
			<i class="fa fa-gears"></i>
			<a href="#"class="rota">规则设定</a>
		</li>
		<!--<li lay-data="img" data-fooc="../wuliu/jquerynav/images/zizhu.jpg">
			<i class="fa fa-qrcode"></i><a href="javascript:;" class="rota">扫个红包</a>
		</li>-->
		<li title="返回顶部" class="for-top">
			<i class="fa fa-arrow-up"></i>
			<a href="javascript:;" class="rota">去顶部</a>
		</li>
	</ul>
</div>



<!--<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>-->
<script type="text/javascript" src="../wuliu/jquery-1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="../wuliu/jquerynav/js/nav.js"></script>
<script type="text/javascript" src="../wuliu/js/streets-data.min.js"></script>
<script type="text/javascript" src="../wuliu/js/cityPicker-2.0.5.js"></script>
<script type="text/javascript">
	/*var t = document.getElementById("test1");
	function f(){
		var event = event || window.event;  //标准化事件对象
		t.value = (event.type);  //获取当前事件类型
		console.log(event)
	}
	t.onmouseover = f;*/
	function table(){
		alert("gggggggggg")
	}

var getcitydata;
	var selector1;
	var selector2;

	init();
	function init(){
		$.ajax({
			//几个参数需要注意一下
			type: "POST",//方法类型
			dataType: "json",//预期服务器返回的数据类型
			url: "/getflag" ,//url
			data:{
				length : length,
				wight : wight,
				height : height,
				sendcity : fromcity,
				receiveprovince : toprovince,
				receivecity : tocity,
				asw : asw,
			},
			success: function (data) {
				if (data.msg === '0'){
					console.log("失败路线："+JSON.stringify(data.falseresult));
					alert("查询错误："+JSON.stringify(data.falseresult))
				}else {
					console.log(data)
					var selectr = '';
					for (var i= 0;data.result.length>i;i++){

						selectr += "<option value=\""+data.result[i]+"\">"+data.result[i]+"</option>";
					}
					var obj = document.getElementById("selectflag");
					var table = "<option value=\"1\" selected>路线版本：默认</option>"+selectr;
					obj.innerHTML= table;
				}


			}

		});


		$.ajax({
			//几个参数需要注意一下
			type: "POST",//方法类型
			dataType: "json",//预期服务器返回的数据类型
			url: "/getenv" ,//url
			success: function (data) {
				console.log(data)
				if (data.msg === '0'){
					console.log("失败");
					alert("失败："+JSON.stringify(data))
				}else {
					console.log(data)
					result = data.result;
					// layer.msg(result);
					document.getElementById("env").innerText=result;



				}

			}

		});


		$.ajax({
			//几个参数需要注意一下
			type: "POST",//方法类型
			dataType: "json",//预期服务器返回的数据类型
			url: "/getcity" ,//url
			success: function (data) {
				//console.log(data)
				if (data.msg === '0'){
					console.log("失败");
					alert("失败："+JSON.stringify(data))
				}else {
					result = data.result;
					// layer.msg(result);
					getcitydata = result;

					selector1 = $('#city-picker-search').cityPicker({
						dataJson: getcitydata,
						renderMode: true,
						search: true,
						autoSelected: true,
						shorthand: true,
						keyboard: true,
						level: 2,
						onChoiceEnd: function() {
							console.log(this.values)
						}
					});

					selector1.setCityVal('福建省, 龙岩市');

					selector2 = $('#city-picker-search1').cityPicker({
						dataJson: getcitydata,
						renderMode: true,
						search: true,
						autoSelected: true,
						shorthand: true,
						keyboard: true,
						level: 2,
						onChoiceEnd: function() {
							console.log(this.values)
						}
					});

					selector2.setCityVal('福建省, 龙岩市');




				}

			}

		});
	}


    var fromcity;
    var fromprovince;
    var tocity;
    var toprovince;

	var length = document.getElementById("length").value;
	var wight = document.getElementById("wight").value;
	var height = document.getElementById("height").value;
	var asw = document.getElementById("asw").value;

    $('.btn-current2').on('click',function search(){
        var sdata = selector1.getCityVal();
        console.log(sdata[0].name);
        console.log(sdata[1].name);
        fromcity = sdata[1].name;
        fromprovince = sdata[0].name;

        var sdata2 = selector2.getCityVal();
        console.log(sdata2[0].name);
        console.log(sdata2[1].name);
        tocity = sdata2[1].name;
        toprovince = sdata2[0].name;

		tosearch();


    });


	function tosearch() {
		var length = document.getElementById("length").value;
		var wight = document.getElementById("wight").value;
		var height = document.getElementById("height").value;
		var asw = document.getElementById("asw").value;
		console.log(asw);
		if (asw == ''){
			alert("实际发货重量为必填项");
			return false;
		}
		if (length == ''){
			length = '0';
		}
		if (wight == ''){
			wight = '0';
		}
		if (height == ''){
			height = '0';
		}
		var selectvalue = $('#selectflag').val();
		console.log(selectvalue);

		$.ajax({
			//几个参数需要注意一下
			type: "POST",//方法类型
			dataType: "json",//预期服务器返回的数据类型
			url: "/wuliupojos" ,//url
			data:{
				length : length,
				wight : wight,
				height : height,
				sendcity : fromcity,
				receiveprovince : toprovince,
				receivecity : tocity,
				asw : asw,
				selectvalue : selectvalue
			},
			success: function (data) {
				if (data.msg === '0'){
					console.log("失败路线："+JSON.stringify(data.falseresult));
					alert("查询错误："+JSON.stringify(data.falseresult))
				}else {
					console.log(data)
					show(data)
				}


			}

		});
	}

	function show(data){
		console.log(data)
		var resname = data.resultname;
		var resvalue = data.resultvalue;
		var result = data.result;
		console.log(resname);
		console.log(resvalue);
		console.log(result);
		var obj = document.getElementById("result1");
		//obj.innerHTML= "预估结果："+JSON.stringify(result);

		var tabletou="<tr>";
		var tableti = "<tbody><tr>";
		for(var key in result){
			console.log(key);
			var value = result[ key ];
			console.log(value);
			for (var key1 in value){
				console.log(key1);
				tabletou += "<td>"+key1+"</td>";
				var value1 = value[ key1 ];
				console.log(value1);
				tableti += "<td>"+value1+"</td>";
			}
		}
		tabletou += "</tr>";
		console.log(tabletou);
		/*tableti += "<table><tr><td>建议物流类型:</td>";
		tableti += "<td>预估最低运费:</td></tr> <tr><td>"+resname+"</td><td>"+resvalue+" 元</td></tr>";
		tableti += "</tr></tbody></table>";*/
		console.log(tableti);
		var table = "<table style=\"text-align: center;font-family: fantasy\">"+tabletou+tableti+"</table>";
		obj.innerHTML= table;

		var obj1 = document.getElementById("result2");
		obj1.innerHTML= resname;
		var obj2 = document.getElementById("result3");
		obj2.innerHTML= resvalue;
		var reshow = document.getElementById("reshow");
		reshow.setAttribute("class", "reshow");
		console.log("失败路线："+JSON.stringify(data.falseresult));

	}


    // 模拟城市-联动/搜索/键盘操作
   /* var selector1 = $('#city-picker-search').cityPicker({
        dataJson: getcitydata,
        renderMode: false,
        search: true,
        autoSelected: true,
        shorthand: true,
        keyboard: true,
        level: 2,
        onChoiceEnd: function() {
            console.log(this.values)
        }
    });
*/
    // 设置城市
    // selector1.setCityVal('福建省, 龙岩市');

    $('.btn-setcity').on('click', function (event) {
        selector1.setCityVal('福建省, 龙岩市');
    });

    // 获取城市值
    $('.btn-obtain').on('click', function (event) {
        alert(JSON.stringify(selector1.getCityVal()));
    });

    $('.btn-prohibit').on('click', function (event) {
        selector1.changeStatus('disabled');
    });

    $('.btn-current').on('click', function (event) {
        selector1.changeStatus('current');
    });

    /*// 模拟城市-联动/搜索/键盘操作
    var selector2 = $('#city-picker-search1').cityPicker({
        dataJson: cityData,
        renderMode: true,
        search: true,
        autoSelected: true,
        shorthand: true,
        keyboard: true,
        level: 2,
        onChoiceEnd: function() {
            console.log(this.values)
        }
    });

    // 设置城市
    selector2.setCityVal('福建省, 龙岩市');*/

    $('.btn-setcity1').on('click', function (event) {
        selector2.setCityVal('福建省, 龙岩市');
    });

    // 获取城市值
    $('.btn-obtain1').on('click', function (event) {
        alert(JSON.stringify(selector2.getCityVal()));
    });

    $('.btn-prohibit1').on('click', function (event) {
        selector2.changeStatus('disabled');
    });

    $('.btn-current1').on('click', function (event) {
        selector2.changeStatus('current');
    });





</script>

</body>
</html>